<template>
	<view>
		<view class="content">
			<view class="detail-list">
				<view class="detail-name">送餐日期</view>
				<view class="detail-value">{{ list.goods_date?list.goods_date.split(' ')[0]:'' }}</view>
			</view>
			<view class="detail-list">
				<view class="detail-name">餐品</view>
				<view class="detail-value">{{ list.goods_name }}</view>
			</view>
			<view class="detail-list">
				<view class="detail-name">创建时间</view>
				<view class="detail-value">{{ list.create_time?list.create_time.split(' ')[0]:'' }}</view>
			</view>
			<view class="detail-list">
				<view class="detail-name">创建人</view>
				<view class="detail-value">{{ list.nickname }}</view>
			</view>
			<view class="detail-list">
				<view class="detail-name">状态</view>
				<view class="detail-value">{{ platoonStatus(list.status) }}</view>
			</view>
		</view>
		<view v-if="list.status === 2" class="operat-content">
			<view class="operat-return" @click="handleReturn">退回</view>
			<view class="operat-confirm" @click="submitConfirm">确认</view>
		</view>
		<uni-popup ref="detailsPopup" type="bottom">
			<view class="return-content">
				<view class="return-bar">
					<view>退回原因</view>
					<view @click="closePopup">
						<image class="close-icon" :src="icons.close"></image>
					</view>
				</view>
				<view class="return-reason">
					<textarea v-model="list.remark" placeholder="请填写退回原因" />
					</view>
				<view class="return-button" @click="submitReturn">
					退回
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';

	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				list: {
					id: undefined,
					goods_date: "",
					goods_id: undefined,
					goods_name: "",
					status: undefined,
					remark: "",
					admin_id: undefined,
					nickname: "",
					create_time: ""
				},
				icons: {
					close: '/static/images/icons/icon_gb@3x.png',
				}
			}
		},
		created() {
			// let key = this.getUrlKey('key')
			// if (key) {
			// 	this.getMess(key);
			// } else {
			// 	const _this = this;
			// 	let token = "";
			// 	uni.getStorage({
			// 		key: 'uerInfo',
			// 		success: function(res) {
			// 			_this.keepLogin(res.data.token)
			// 		}
			// 	});
			// }

			this.id = this.getUrlKey('id')
			this.getList();
		},
		methods: {
			keepLogin(token) {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_admin_keepLogin",
					version: "1.0",
					type: 2,
					data: {
						token: token
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			getMess(key) {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_admin_login",
					version: "1.0",
					type: "1",
					data: {
						key: key
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			getList() {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_supplier_getGoodsArrangeList",
					version: "1.0",
					type: 2,
					data: {
						id: this.id ? this.id : ''
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			handleReturn(){
				this.$refs.detailsPopup.open();
			},
			closePopup(){
				this.$refs.detailsPopup.close();
			},
			submitConfirm() {
				const path = {
					app: "wxadmin",
					api: "api_wxadmin_supplier_arrangeConfirm",
					version: "1.0",
					type: 2,
					data: {
						id: this.list.id
					}
				}
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			submitReturn(){
				const path = {
				    app:"wxadmin",
				    api:"api_wxadmin_supplier_revocation",
				    version:"1.0",
				    type:2,
				    data:{
				        id: this.list.id,
						remark: this.list.remark
				    }
				}
				console.log('path', path)
				const _this = this;
				_this.sendSock(path, function(res) {
					_this.getSock(res.data)
				})
			},
			getSock(res) {
				if (res !== '{"type":"ping"}') {
					const resj = JSON.parse(res);
					if (resj.code === -1) {
						uni.showToast({
							icon: "none",
							title: resj.message,
							duration: 2000
						});
					} else if (resj.code === 403) {
						const key = this.getUrlKey('key')
						this.getMess(key);

					} else {
						if (resj.api === "api_wxadmin_admin_login") {
							this.$store.commit('login', resj.data);
							this.temporary()
						} else if (resj.api === "api_wxadmin_admin_keepLogin") {
							this.temporary()
						} else if (resj.api === "api_wxadmin_supplier_getGoodsArrangeList") {
							const data = resj.data[0];
							if(!data.remark){
								data.remark = ""
							}
							this.list = data
						} else if (resj.api === "api_wxadmin_supplier_arrangeConfirm") {
							this.$refs.detailsPopup.close();
							uni.showToast({
								icon: "none",
								title: "确认成功",
								duration: 2000
							});
							setTimeout(function(){
								const _this = this
								uni.navigateTo({
									url: '/pages/backstage/supplier/platoon' + '?' + _this.version
								})
							},1000)
						} else if (resj.api === "api_wxadmin_supplier_revocation") {
							this.$refs.detailsPopup.close();
							uni.showToast({
								icon: "none",
								title: "退回成功",
								duration: 2000
							});
							setTimeout(function(){
								uni.navigateTo({
									url: '/pages/backstage/supplier/platoon'
								})
							},1000)
						}
					}
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}

	.content {
		margin-top: 20rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}

	.content .detail-list:not(:last-child) {
		border-bottom: 1rpx solid #E4E4E4;
		box-sizing: border-box;
	}

	.detail-list,
	.operat-return,
	.operat-confirm {
		display: flex;
		align-items: center;
	}

	.detail-list {
		justify-content: space-between;
		height: 100rpx;
	}

	.detail-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}

	.detail-value {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
	}

	.operat-content {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding: 0rpx 30rpx 80rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.operat-return {
		justify-content: center;
		width: 320rpx;
		height: 98rpx;
		background: rgba(245, 245, 245, 1);
		border: 1rpx solid rgba(153, 153, 153, 1);
		border-radius: 49rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(153, 153, 153, 1);
		line-height: 1;
	}

	.operat-confirm {
		justify-content: center;
		width: 320rpx;
		height: 98rpx;
		background: linear-gradient(0deg, rgba(255, 195, 36, 1), rgba(255, 211, 94, 1));
		box-shadow: 0rpx 5rpx 5rpx 0rpx rgba(255, 195, 36, 0.2);
		border-radius: 49rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		line-height: 1;
	}
	.return-bar{
		height: 90rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.return-content{
		height:548rpx;
		padding: 0 30rpx 30rpx 30rpx;
		background:rgba(255,255,255,1);
		border-radius:10px 10px 0px 0px;
	}
	.close-icon{
		width: 30rpx;
		height: 30rpx;
	}
	.return-reason{
		height:300rpx;
		padding: 20rpx;
		background:rgba(255,255,255,1);
		border:1rpx solid rgba(224,224,224,1);
	}
	.return-reason textarea{
		width: 100%;
		height: 100%;
	}
	.return-button{
		height:98rpx;
		margin-top: 30rpx;
		background:linear-gradient(0deg,rgba(255,195,36,1),rgba(255,211,94,1));
		box-shadow:0rpx 5rpx 5rpx 0rpx rgba(255,195,36,0.2);
		border-radius:49rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size:32rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		line-height:1;
	}
</style>
